<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /*清除浏览器默认样式*/
  * {
    margin: 0;
    padding: 0;
  }

  /* 设置外部容器 */
  .wrappers {
    width: 900px;
    height: 6px;
    margin: 100px auto;
  }

  /* 设置进度条容器 */
  .wrapper {
    width: 800px;
    height: 6px;
    margin-bottom: 0;
    line-height: 6px;
    position: relative;
    background-color: hsl(108, 100%, 83%);
  }

  /* 设置进度条显示颜色 */
  #progress {
    width: 0;
    height: 100%;
    background-color: red;
  }

  /* 设置进度条右侧圆点 */
  #progress-bar {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -6px;
    border-radius: 50%;
    background-color: hsl(252, 100%, 83%);
  }

  /* 设置显示百分比 */
  #show {
    position: relative;
    left: 840px;
    top: -12px;
  }
</style>

<body>
  <!-- 外部容器 -->
  <div class="wrappers">
    <!-- 包裹进度条 -->
    <div class="wrapper">
      <!-- 进度条 -->
      <div id="progress">
        <!-- 进度条右边圆角 -->
        <div id="progress-bar"></div>
      </div>
    </div>
    <!-- 设置进度条默认显示 0%-->
    <span id="show">0%</span>
  </div>

</body>
<script type="text/javascript">
  window.onload = function () {
    // 获取progress对象
    var progress = document.getElementById("progress");
    // 获取show对象
    var show = document.getElementById("show");
    // 获取progress_bar对象
    // 为进度条右侧圆点绑定鼠标按下事件
    var progress_bar = document.getElementById("progress-bar");
    progress_bar.onmousedown = function (event) {
      event = event || window.event;
      //获取圆点偏移量
      var progressLeft = event.clientX - this.offsetLeft;

      // 为右侧圆点绑定拖动事件
      document.onmousemove = function (event) {
        event = event || window.event;
        // 获取鼠标坐标
        var progressX = event.clientX - progressLeft;
        if (progressX <= 0) {
          // 暂停拖动（如果拖动条超出范围，则停止拖动）
          progressX = 0;
        }
        else if (progressX >= 800) {
          progressX = 800;
        }
        console.log(progressX);
        progress_bar.style.left = progressX + "px";
        // 显示进度条
        progress.style.width = progressX + "px";
        // 显示进度条百分比
        show.innerHTML = Math.round(progressX / 8) + "%";

      };

      // 为右侧圆点绑定鼠标抬起事件
      document.onmouseup = function (event) {
        event = event || window.event;
        // 取消鼠标移动事件
        document.onmousemove = null;
        // 取消鼠标抬起事件
        document.onmouseup = null;
      };
      //取消浏览器对拖拽内容进行搜索的默认行为
      return false;
    };

  };
</script>

</html>